<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建智能体 - AI智能体开发平台</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="za.css">
    <!-- 使用 layui 自带图标 -->
</head>
<body style="background-color: #FFFFFF; margin: 0; padding: 20px;">
    <div class="page-header" style="margin-bottom: 20px;">
        <h2 id="pageTitle">创建智能体</h2>
        <p style="color: #909399; margin-top: 8px;">填写智能体信息，包括名称、系统提示词和可见性设置</p>
    </div>
    
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="agentForm">
                <!-- 隐藏的智能体ID字段，用于编辑模式 -->
                <input type="hidden" id="agentId" name="agentId">
                
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 120px;">智能体名称 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" id="agentName" name="agentName" required lay-verify="required|maxlength" placeholder="请输入智能体名称" maxlength="50"
                            autocomplete="off" class="layui-input" style="width: 400px;">
                        <div class="layui-form-mid layui-word-aux" id="nameLength">0/50</div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 120px; vertical-align: top;">系统提示词 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <textarea id="systemPrompt" name="systemPrompt" required lay-verify="required" placeholder="请输入系统提示词，支持Markdown格式" 
                            class="layui-textarea" style="width: 600px; height: 200px;"></textarea>
                        <div class="layui-form-mid layui-word-aux" id="promptLength">0/1000</div>
                        <div class="layui-form-mid layui-word-aux">
                            提示：系统提示词将指导智能体的行为和响应风格，越详细的提示词会让智能体表现越好。
                        </div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 120px;">可见性设置 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="visibility" value="public" title="公开" checked lay-filter="visibility">
                        <input type="radio" name="visibility" value="private" title="私有" lay-filter="visibility">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 120px;">关联知识库 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block" style="width: 600px;">
                        <div class="layui-form" lay-filter="knowledgeForm">
                            <!-- 知识库多选框组 -->
                            <div id="knowledgeList" class="layui-anim layui-anim-upbit">
                                <!-- 模拟知识库数据，实际应从API获取 -->
                                <input type="checkbox" name="knowledgeBases[]" value="1" title="产品手册知识库" lay-skin="primary">
                                <input type="checkbox" name="knowledgeBases[]" value="2" title="常见问题解答" lay-skin="primary">
                                <input type="checkbox" name="knowledgeBases[]" value="3" title="用户指南" lay-skin="primary">
                                <input type="checkbox" name="knowledgeBases[]" value="4" title="技术文档" lay-skin="primary">
                                <input type="checkbox" name="knowledgeBases[]" value="5" title="公司介绍" lay-skin="primary">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="margin-top: 10px;">
                                提示：可选择多个知识库，智能体将能够从这些知识库中获取信息。
                                <a href="knowledge-manage.html" id="manageKnowledgeLink" target="_blank" style="color: #409eff; margin-left: 10px;">
                                    <i class="layui-icon layui-icon-link" style="margin-right: 2px;"></i>管理知识库
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-form-item" style="margin-left: 120px;">
                    <div class="layui-input-block">
                        <button class="za-btn za-btn-primary" lay-submit lay-filter="submitBtn" id="submitBtn">保存</button>
                        <button type="button" class="za-btn za-btn-secondary" id="cancelBtn" style="margin-left: 10px;">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
        layui.use(['jquery', 'form'], function() {
            var $ = layui.jquery;
            var form = layui.form;
            
            // 获取URL参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
            
            // 更新字数统计
            function updateCharCount(input, counterId, maxLength) {
                var count = $(input).val().length;
                $(counterId).text(count + '/' + maxLength);
            }
            
            // 检查是否为编辑模式
            var agentId = getUrlParam('id');
            if (agentId) {
                // 更新页面标题
                $('#pageTitle').text('编辑智能体');
                document.title = '编辑智能体 - AI智能体开发平台';
                
                // 设置智能体ID
                $('#agentId').val(agentId);
                
                // 模拟加载智能体数据（实际应用中应该通过API获取）
                // 这里使用模拟数据，真实场景需要替换为实际的API调用
                var mockAgentData = {
                    id: agentId,
                    name: '客服助手', // 模拟数据，实际应从API获取
                    systemPrompt: '你是一个专业的客服智能助手，能够回答用户常见问题，提供产品信息和服务支持。请使用友好、专业的语气，确保信息准确。',
                    visibility: 'public',
                    knowledgeBases: ['1', '2'] // 模拟已关联的知识库ID
                };
                
                // 填充表单数据
                $('#agentName').val(mockAgentData.name);
                $('#systemPrompt').val(mockAgentData.systemPrompt);
                
                // 设置可见性单选按钮
                if (mockAgentData.visibility === 'private') {
                    $('input[name="visibility"][value="private"]').prop('checked', true);
                } else {
                    $('input[name="visibility"][value="public"]').prop('checked', true);
                }
                
                // 设置已关联的知识库（多选框）
                if (mockAgentData.knowledgeBases && mockAgentData.knowledgeBases.length > 0) {
                    mockAgentData.knowledgeBases.forEach(function(knowledgeId) {
                        $('input[name="knowledgeBases[]"][value="' + knowledgeId + '"]').prop('checked', true);
                    });
                }
                
                // 更新表单
                form.render();
                
                // 更新字数统计
                updateCharCount('#agentName', '#nameLength', 50);
                updateCharCount('#systemPrompt', '#promptLength', 1000);
                
                // 更新管理知识库链接，添加智能体ID参数
                $('#manageKnowledgeLink').attr('href', 'knowledge-manage.html?agentId=' + agentId);
            }
            
            // 名称输入事件
            $('#agentName').on('input', function() {
                updateCharCount(this, '#nameLength', 50);
            });
            
            // 系统提示词输入事件
            $('#systemPrompt').on('input', function() {
                updateCharCount(this, '#promptLength', 1000);
            });
            
            // 表单提交
            form.on('submit(submitBtn)', function(data) {
                // 阻止默认提交
                return false;
                
                // 实际应用中的保存逻辑
                var formData = data.field;
                var isEditMode = !!formData.agentId;
                
                // 根据是否是编辑模式选择API端点
                var apiUrl = isEditMode ? '/za/api/agents/update' : '/za/api/agents/create';
                
                // 显示加载状态
                $('#submitBtn').attr('disabled', true).html('<i class="layui-icon layui-icon-loading"></i> 保存中...');
                
                // 模拟API调用
                setTimeout(function() {
                    console.log('提交数据:', formData);
                    
                    // 重置按钮状态
                    $('#submitBtn').attr('disabled', false).html('保存');
                    
                    // 显示成功提示并跳转
                    alert(isEditMode ? '智能体更新成功！' : '智能体创建成功！');
                    window.location.href = 'agent-list.html';
                }, 1000);
            });
            
            // 取消按钮点击事件
            $('#cancelBtn').on('click', function() {
                if (confirm('确定要取消操作吗？未保存的更改将会丢失。')) {
                    window.location.href = 'agent-list.html';
                }
            });
        });
    </script>
</body>
</html>